<template>
<!--  <h2>库房信息</h2>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container" :style="{height: treeHeight+'px'}" style="overflow-y: auto">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                   :filter-node-method="filterNode" :default-expanded-keys="expandedkeys"
                   :current-node-key="currentNodekey" ref="tree" node-key="id" default-expand-all highlight-current
                   @node-click="handleNodeClick">
            <template slot-scope="{ node, data }">
              <span class="span-ellipsis" :title="node.label" :style="size">{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <!-- 是否展示库房表格 -->
        <div v-show="storeShow">
          <el-form :model="storeParams" ref="storeForm"  :inline="true" v-show="showSearchstore"
                   label-width="68px">
            <el-form-item label="库房编号" prop="storeCode">
              <el-input v-model="storeParams.storeCode" placeholder="请输入库房编号" clearable style="width: 240px" maxlength="30" @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="库房名称" prop="storeName">
              <el-input v-model="storeParams.storeName" placeholder="请输入库房名称" clearable style="width: 240px" maxlength="30" @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus"  @click="handleAdd" v-hasPermi="['archive:warehouseManagement:warehouseInformation:store:add']">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearchstore" @queryTable="getStoreList"></right-toolbar>
          </el-row>
          <el-table v-loading="storeloading" :data="storeList" height="600" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" prop="storeId"/>
            <el-table-column label="操作" align="center" width="250">
              <template slot-scope="scope">
                <el-button  type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:store:edit']">修改</el-button>
                <el-button  type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:store:delete']">删除</el-button>
                <el-button  type="text" icon="el-icon-view" @click="handleView(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:store:detail']">库房详情</el-button>
              </template>
              </el-table-column>
            <el-table-column label="库房编号" prop="storeCode" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房名称" prop="storeName" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="位置" prop="storeSpace" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="是否分区" prop="isFenqu" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房类型" prop="storeType" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房面积" prop="storeArea" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房管理员" prop="userIds" align="center" :show-overflow-tooltip="true" />
          </el-table>
          <pagination v-show="storeTotal>0" :total="storeTotal" :page.sync="storeParams.pageNum" :limit.sync="storeParams.pageSize" @pagination="getStoreList" />
        </div>

        <!-- 是否展示档案柜表格 -->
        <div v-show="shelfShow">
          <el-form :model="shelfParams" ref="shelfForm"  :inline="true" v-show="showSearchCabinet"
                   label-width="90px">
            <el-form-item label="档案柜编号" prop="shelfCode">
              <el-input v-model="shelfParams.shelfCode" placeholder="请输入档案柜编号" maxlength="30" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="档案柜名称" prop="shelfName">
              <el-input v-model="shelfParams.shelfName" placeholder="请输入档案柜名称" maxlength="30" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search"  @click="handleShelfQuery">搜索</el-button>
              <el-button icon="el-icon-refresh"  @click="resetShelfQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus"  @click="handleShelfAdd" v-hasPermi="['archive:warehouseManagement:warehouseInformation:shelf:add']">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearchCabinet" @queryTable="getShelfList"></right-toolbar>
          </el-row>
          <el-table v-loading="shelfloading" :data="shelfList" :height="tableHeight" @selection-change="handleSelection">
            <el-table-column type="selection" width="55" align="center" prop="shelfId" />
            <el-table-column label="操作" align="center" width="250">
              <template slot-scope="scope">
                <el-button  type="text" icon="el-icon-edit" @click="handleShelfUpdate(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:shelf:edit']">修改</el-button>
                <el-button  type="text" icon="el-icon-delete" @click="handleShelfDelete(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:shelf:delete']">删除</el-button>
                <el-button  type="text" icon="el-icon-view" @click="handleShelfView(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:shelf:detail']">档案格详情</el-button>
              </template>
            </el-table-column>
            <el-table-column label="档案柜编号" prop="shelfCode" align="center" />
            <el-table-column label="档案柜名称" prop="shelfName" align="center" />
            <el-table-column label="所属区域" prop="kfqy" align="center" />
            <el-table-column label="AB面分类" prop="shelfSide" align="center" />
            <el-table-column label="横格（个）" prop="shelfStand" align="center" />
            <el-table-column label="竖格（个）" prop="shelfCross" align="center" />
            <el-table-column label="总个数" prop="shelfTotalnum" align="center" />
          </el-table>
          <pagination v-show="shelfTotal>0" :total="shelfTotal" :page.sync="shelfParams.pageNum" :limit.sync="shelfParams.pageSize" @pagination="getShelfList" />
        </div>

        <div v-show="gridShow">
          <h2>档案格列表</h2>
          <el-table v-loading="gridloading" :data="gridList" :height="tableHeight" @selection-change="handleSelectionGrid">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="id"/>
            <el-table-column label="格子编号" prop="gridCode" align="center" />
            <el-table-column label="格子名称" prop="gridName" align="center" />
            <el-table-column label="所属档案柜" prop="shelfName" align="center" />
            <el-table-column label="AB面分类" prop="gridSide" align="center" />
            <el-table-column label="格子宽度(mm)" prop="gridWidth" align="center" />
            <el-table-column label="装有数量" prop="putawayNum" align="center" />
          </el-table>
          <pagination v-show="gridTotal>0" :total="gridTotal" :page.sync="gridParams.pageNum" :limit.sync="gridParams.pageSize" @pagination="getGridList" />
        </div>
      </el-col>
    </el-row>

    <!-- 库房信息的新增/修改 -->
    <el-dialog :title="storeTitle" :visible.sync="storeOpen" width="45%" append-to-body :before-close="storeCancel">
      <el-form ref="storeForm" :model="storeForm" :rules="storeRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="库房编号" prop="storeCode">
              <el-input v-model="storeForm.storeCode" placeholder="请输入库房编号" style="width: 100%;" :disabled="isStoreCode || isUpdate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库房名称" prop="storeName">
              <el-input v-model="storeForm.storeName" placeholder="请输入库房名称" style="width: 100%;" :disabled="isShowView" maxlength="40"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="位置" prop="storeSpace">
              <el-input v-model="storeForm.storeSpace" placeholder="请输入位置" style="width: 100%;" :disabled="isShowView"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库房类型" prop="storeType">
              <el-select v-model="storeForm.storeType" placeholder="请选择库房类型" style="width: 100%;" :disabled="isShowView">
                <el-option v-for="dict in dict.type.STORETYPE" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="面积(平方米)" prop="storeArea">
              <el-input-number v-model="storeForm.storeArea" controls-position="right" :min="0" placeholder="请输入面积" style="width: 100%;" :disabled="isShowView"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库房管理员" prop="userId">
              <el-select v-model="storeForm.userId" multiple placeholder="请选择" style="width: 100%;" :disabled="isShowView">
                <el-option v-for="item in userOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否分区" prop="isFenqu">
              <el-select v-model="storeForm.isFenqu" placeholder="请选择" style="width: 100%;" @change="handeleIsFenqu" :disabled="isShowView || isUpdate">
                <el-option v-for="item in isFenquOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-select v-model="storeForm.region" multiple placeholder="请选择" style="width: 100%;" :disabled="storeForm.isFenqu != '1' || isShowView || isUpdate">
                <el-option v-for="dict in dict.type.REGION" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStoreForm" v-show="!isShowView">保 存</el-button>
        <el-button  @click="storeCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 档案柜新增/修改 -->
    <el-dialog :title="shelfTitle" :visible.sync="shelfOpen" width="45%" append-to-body :before-close="shelfCancel">
      <el-form ref="shelfForm" :model="shelfForm" :rules="shelfRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="档案柜编号" prop="shelfCode">
              <el-input v-model="shelfForm.shelfCode" placeholder="请输入档案柜编号" style="width: 100%;" :disabled="isShelfCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案柜名称" prop="shelfName">
              <el-input v-model="shelfForm.shelfName" placeholder="请输入档案柜名称" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="位置" prop="kfqy">
              <el-select v-model="shelfForm.kfqy" placeholder="请选择位置" style="width: 100%;" :disabled="isKfqy">
                <el-option v-for="item in kfquOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="AB面分类" prop="shelfSide">
              <el-select v-model="shelfForm.shelfSide" placeholder="请选择AB面分类" style="width: 100%;">
                <el-option v-for="item in shelfSideOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="宽度(cm)" prop="shelfWidth">
              <el-input-number v-model="shelfForm.shelfWidth" controls-position="right" :min="1" placeholder="请输入宽度" style="width: 100%;"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高度(cm)" prop="shelfHeight">
              <el-input-number v-model="shelfForm.shelfHeight" controls-position="right" :min="1"  placeholder="请输入高度" style="width: 100%;"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="档案柜排数" prop="shelfCross">
              <el-input-number v-model="shelfForm.shelfCross" controls-position="right" :min="1" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入档案柜排数" style="width: 100%;"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案柜列数" prop="shelfStand">
              <el-input-number v-model="shelfForm.shelfStand" controls-position="right" :min="1" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入档案柜列数" style="width: 100%;"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitShelfForm">保 存</el-button>
        <el-button  @click="shelfCancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="gridTitle" :visible.sync="gridOpen" width="45%" append-to-body>
      <el-table v-loading="gridDetailloading" :data="gridDetailList" height="500">
        <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="id"/>
        <el-table-column label="格子编号" prop="gridCode" align="center" />
        <el-table-column label="格子名称" prop="gridName" align="center" />
        <el-table-column label="所属档案柜" prop="shelfName" align="center" />
        <el-table-column label="AB面分类" prop="gridSide" align="center" />
        <el-table-column label="格子宽度(mm)" prop="gridWidth" align="center" />
        <el-table-column label="装有数量" prop="putawayNum" align="center" />
      </el-table>
      <pagination v-show="gridDetailTotal>0" :total="gridDetailTotal" :page.sync="gridDetailParams.pageNum" :limit.sync="gridDetailParams.pageSize" @pagination="getGridDetailList" />
    </el-dialog>
  </div>
</template>

<script>
import estimateTableHeight from '@/mixins/estimateTableHeight'
import {
  addShelf,
  addStore, checkShelf, deleteShelf, deleteStore, getShelfDetail, getShelfList,
  getStoreDetail,
  getStoreList, getTreeList, updateShelf,
  updateStore,
  userList, getGridList, checkStore
} from "@/api/archive/warehouseManagement/warehouseInformation";
export default {
  name: "index",
  mixins: [estimateTableHeight], // 混入方法
  archive_Dicts: ['STORETYPE', 'REGION'],
  data() {
    const checkStoreCode = (rule, value, callback) =>  {
      if(value) {
        var reg = /^[^\s]+[\s]*.*$/
        if (reg.test(value) == false) {
          callback(new Error('库房编号不能为空格'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const checkShelfCode = (rule, value, callback) =>  {
      if(value) {
        var reg = /^[^\s]+[\s]*.*$/
        if (reg.test(value) == false) {
          callback(new Error('档案柜编号不能为空格'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const checkFieldLength = (rule, value, callback) => {
      if (value) {
        var reg = /^(?!0)[0-9]{1,3}$/
        if (reg.test(value) === false) {
          callback(new Error('请输入数字，1-3位'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const checkLength = (rule, value, callback) => {
      if (value) {
        var reg = /^(?!0)[0-9]{1,9}$/
        if (reg.test(value) === false) {
          callback(new Error('请输入数字，1-9位'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      size: "",
      // 库房表单
      wareHouseForm: {},
      // 档案树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      // 是否展示库房表格
      storeShow: false,
      // 库房查询参数
      storeParams: {
        pageNum: 1,
        pageSize: 10,
        storeCode: undefined,
        storeName: undefined
      },
      // 显示搜索条件
      showSearchstore: true,
      // 遮挡层
      storeloading: true,
      // 库房信息表格数据
      storeList: [],
      // 总条数
      storeTotal: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 弹出层标题
      storeTitle: "",
      // 是否打开弹出层
      storeOpen: false,
      // 库房编号
      isStoreCode: false,
      isUpdate: false,
      // 弹出层表单
      storeForm: {},
      // 弹出层表单校验
      storeRules: {
        storeCode: [
          { required: true, message: "库房编号不能为空", trigger: "blur" },
          { required: true, trigger: 'blur', validator: checkStoreCode }
        ],
        storeName: [
          { required: true, message: "库房名称不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "库房管理员不能为空", trigger: "blur" }
        ],
        storeArea: [
          { trigger: 'blur', validator: checkLength }
        ]
      },
      // 是否分区下拉框
      isFenquOption: [
        {value: "0", label: "不分区"},
        {value: "1", label: "分区"}
      ],
      // 库房管理员下拉框
      userOption: [],
      // 详情
      isShowView: false,

      // 是否展示档案柜表格
      shelfShow: false,
      // 档案柜查询参数
      shelfParams: {
        pageNum: 1,
        pageSize: 10,
        shelfCode: undefined,
        shelfName: undefined
      },
      // 显示搜索条件
      showSearchCabinet: true,
      // 遮挡层
      shelfloading: true,
      // 档案柜表格数据
      shelfList: [],
      // 总条数
      shelfTotal: 0,
      // 选中数组
      shelfIds: [],
      // 非单个禁用
      shelfSingle: true,
      // 非多个禁用
      shelfMultiple: true,
      // 弹出层标题
      shelfTitle: "",
      // 是否打开弹出层
      shelfOpen: false,
      // 档案柜编号
      isShelfCode: false,
      // 弹出层表单
      shelfForm: {},
      // 弹出层表单校验
      shelfRules: {
        shelfCode: [
          { required: true, message: "档案柜编号不能为空", trigger: "blur" },
          { required: true, trigger: 'blur', validator: checkShelfCode }
        ],
        shelfName: [
          { required: true, message: "档案柜名称不能为空", trigger: "blur" }
        ],
        shelfSide: [
          { required: true, message: "AB面分类不能为空", trigger: "blur" }
        ],
        shelfWidth: [
          { required: true, message: "宽度不能为空", trigger: "blur" },
          { trigger: 'blur', validator: checkFieldLength }
        ],
        shelfHeight: [
          { required: true, message: "高度不能为空", trigger: "blur" },
          { trigger: 'blur', validator: checkFieldLength }
        ],
        shelfCross: [
          { required: true, message: "档案柜排数不能为空", trigger: "blur" },
          { trigger: 'blur', validator: checkFieldLength }
        ],
        shelfStand: [
          { required: true, message: "档案柜列数不能为空", trigger: "blur" },
          { trigger: 'blur', validator: checkFieldLength }
        ],
      },
      // 档案柜位置下拉框
      kfquOption: [],
      isKfqy: true,
      // AB面分类下拉框
      shelfSideOption: [
        {value: 'A', label: 'A面'},
        {value: 'B', label: 'B面'},
        {value: 'AB', label: 'A面,B面'},
      ],

      // 是否展示档案格
      gridShow: false,
      // 遮挡层
      gridloading: true,
      // 档案格表格数据
      gridList: [],
      // 选中数组
      gridIds: [],
      // 非单个禁用
      gridSingle: true,
      // 非多个禁用
      gridMultiple: true,
      // 档案格表单
      gridParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 档案格总条数
      gridTotal: 0,
      // 弹出窗标题
      gridTitle: "档案格详情",
      // 是否弹窗
      gridOpen: false,

      // 遮挡层
      gridDetailloading: true,
      // 档案格表格数据
      gridDetailList: [],
      // 总条数
      gridDetailTotal: 0,
      // 表单
      gridDetailParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
    if (this.$store.getters.size == 'small') {
      this.size = 'font-size: 12px;'
    } else {
      this.size = 'font-size: 14px;'
    }
    this.getDeptTree()
    this.getUserList();
  },
  methods: {
    getDeptTree(){
      getTreeList().then(response => {
        console.log(response.data)
        this.deptOptions = response.data;
        if(this.deptOptions.length > 0) {
          this.currentNodeKey = this.deptOptions[0].id;
          this.expandedkeys.push(this.deptOptions[0].id);
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.deptOptions[0].id)
          })
          this.storeShow = true
          this.shelfShow = false
          this.gridShow = false
          this.wareHouseForm.wareHouseArea = ""
          this.getStoreList()
        }
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data)

      this.storeParams = {
        storeCode: undefined,
        storeName: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.shelfParams = {
        shelfCode: undefined,
        shelfName: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.gridParams = {
        pageNum: 1,
        pageSize: 10
      }
      // id
      // this.wareHouseForm.wareHouseId = data.id
      // 节点类型
      this.wareHouseForm.wareHouseType = data.nodeType

      if(data.nodeType == "region") {
        const id = data.id.split("_")
        this.wareHouseForm.wareHouseId = id[0]
      } else {
        this.wareHouseForm.wareHouseId = data.id
      }

      if(data.tenantCode != null) {
        // 区域下拉框
        this.wareHouseForm.wareHouseRegion = data.tenantCode
      } else {
        this.wareHouseForm.wareHouseRegion = ""
      }

      if(data.nodeType == "root") {
        this.storeShow = true
        this.shelfShow = false
        this.gridShow = false
        this.wareHouseForm.wareHouseArea = ""
        this.getStoreList()
      } else if(data.nodeType == "store") {
        this.storeShow = false
        this.shelfShow = true
        this.gridShow = false
        this.wareHouseForm.wareHouseArea = ""
        this.getShelfList()
      } else if(data.nodeType == "region") {
        this.storeShow = false
        this.shelfShow = true
        this.gridShow = false
        // 节点区域
        this.wareHouseForm.wareHouseArea = data.tenantCode
        this.getShelfList()
      } else if(data.nodeType == "shelf") {
        this.storeShow = false
        this.shelfShow = false
        this.gridShow = true
        this.wareHouseForm.wareHouseArea = ""
        this.getGridList()
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.storeParams.pageNum = 1;
      this.getStoreList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.storeParams = {
        storeCode: undefined,
        storeName: undefined
      }
      this.getStoreList();
    },
    // 获取列表数据
    getStoreList() {
      this.storeloading = true
      this.getUserList()
      getStoreList(this.storeParams).then(response => {
        this.storeTotal = response.total
        this.storeList = response.rows
        for (var i = 0; i < response.rows.length; i++) {
          // 渲染表格单位
          for (let j = 0; j < this.isFenquOption.length; j++) {
            if(response.rows[i].isFenqu == this.isFenquOption[j].value){
              this.storeList[i].isFenqu = this.isFenquOption[j].label
            }
          }
          for (let j = 0; j < this.dict.type.STORETYPE.length; j++) {
            if(response.rows[i].storeType == this.dict.type.STORETYPE[j].value){
              this.storeList[i].storeType = this.dict.type.STORETYPE[j].label
            }
          }
          var arr = []
          for (let j = 0; j < this.userOption.length; j++) {
            if(response.rows[i].userIds != null){
              const userIds = response.rows[i].userIds.split(',')
              for (let k = 0; k < userIds.length; k++) {
                if(userIds[k] == this.userOption[j].value){
                  arr.push(this.userOption[j].label)
                }
              }
            }
          }
          this.storeList[i].userIds = arr.join(',')
        }
        this.storeloading = false
      })
    },
    // 获取库房管理员
    getUserList() {
      userList().then(response => {
        this.userOption = response.rows.map(item =>{
          return {
            value: item.userId,
            label: item.userName
          }
        })
      })
    },
    // 新增
    handleAdd() {
      this.resetStoreForm()
      this.resetForm('storeForm')
      this.storeTitle = "新增库房"
      this.isStoreCode = false
      this.isUpdate = false
      this.isShowView = false
      this.storeOpen = true
      this.getUserList()
    },
    // 修改
    handleUpdate(row) {
      this.resetStoreForm()
      this.resetForm('storeForm')
      this.storeForm.userId = []
      const storeId = row.storeId
      this.getUserList()
      checkStore(storeId).then(response => {
        if(response.data == '500') {
          this.isUpdate = true
        } else {
          this.isUpdate = false
        }
        getStoreDetail(storeId).then(response => {
          this.storeForm = response.data
          if(response.data.storeType != null){
            this.storeForm.storeType = response.data.storeType.toString()
          }
          if(response.data.isFenqu != null) {
            this.storeForm.isFenqu = response.data.isFenqu.toString()
          }
          if(response.data.region != null && response.data.region != '' && response.data.region != undefined) {
            this.storeForm.region = response.data.region.split(';')
            // console.log(this.storeForm.region)
          }
          this.storeTitle = "修改库房"
          this.isStoreCode = true
          this.storeOpen = true
        })
      })
    },
    // 详情
    handleView(row) {
      this.resetStoreForm()
      this.resetForm('storeForm')
      this.storeForm.userId = []
      const storeId = row.storeId
      this.getUserList()
      getStoreDetail(storeId).then(response => {
        this.storeForm = response.data
        if(response.data.storeType != null){
          this.storeForm.storeType = response.data.storeType.toString()
        }
        if(response.data.isFenqu != null) {
          this.storeForm.isFenqu = response.data.isFenqu.toString()
        }
        if(response.data.region != null && response.data.region != '' && response.data.region != undefined) {
          this.storeForm.region = response.data.region.split(';')
        }
        this.storeTitle = "库房详情"
        this.isShowView = true
        this.isStoreCode = true
        this.storeOpen = true
      })
    },
    // 删除
    handleDelete(row) {
      const storeId = row.storeId
      const storeName=row.storeName;
      this.$modal.confirm('是否确认删除名称为"' + storeName + '"的数据项？').then(function() {
        return deleteStore(storeId)
      }).then(() => {
        this.getDeptTree()
        this.getStoreList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.storeId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 重置表单
    resetStoreForm() {
      this.storeForm = {
        storeCode: undefined,
        storeName: undefined,
        storeSpace: undefined,
        storeType: undefined,
        storeArea: undefined,
        userId: [],
        userIds: null,
        isFenqu: "0",
        region: []
      }
    },
    handeleIsFenqu() {
      this.storeForm.region = ''
    },
    // 保存库房
    submitStoreForm() {
      this.$refs["storeForm"].validate(valid => {
          if (valid) {
            if(this.storeForm.isFenqu == '1' && this.storeForm.region == '') {
              this.$message({message: '请选择区域', type: 'warning'})
              return
            }
            if(this.storeForm.storeId!=undefined){
              console.log(this.storeForm)
              if(this.storeForm.region != null && this.storeForm.region != undefined && this.storeForm.region != '') {
                this.storeForm.region = this.storeForm.region.join(';')
              } else {
                this.storeForm.region = ''
              }
              updateStore(this.storeForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.storeOpen = false;
                this.getDeptTree()
                this.getStoreList();
              })
            } else {
              this.storeForm.region = this.storeForm.region.join(';')
              addStore(this.storeForm).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.storeOpen = false;
                  this.getDeptTree()
                  this.getStoreList();
              }).catch(error => {
                this.storeForm.region = this.storeForm.region.split(';')
              })
            }
          }
      })
    },
    // 弹窗取消
    storeCancel() {
      this.storeOpen = false
      this.isShowView = false
    },

    // 搜索按钮操作
    handleShelfQuery() {
      this.shelfParams.pageNum = 1;
      this.getShelfList()
    },
    /** 重置按钮操作 */
    resetShelfQuery() {
      this.shelfParams = {
        shelfCode: undefined,
        shelfName: undefined
      }
      this.handleShelfQuery()
    },
    // 获取档案柜表格数据
    getShelfList() {
      this.shelfParams.storeId = this.wareHouseForm.wareHouseId
      if(this.wareHouseForm.wareHouseArea != undefined){
        this.shelfParams.kfqy = this.wareHouseForm.wareHouseArea
      } else {
        this.shelfParams.kfqy = undefined
      }
      getShelfList(this.shelfParams).then(response => {
        this.shelfTotal = response.total
        this.shelfList = response.rows
        for (var i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.dict.type.REGION.length; j++) {
            if(response.rows[i].kfqy == this.dict.type.REGION[j].value){
              this.shelfList[i].kfqy = this.dict.type.REGION[j].label
            }
          }
          for (let j = 0; j < this.shelfSideOption.length; j++) {
            if(response.rows[i].shelfSide == this.shelfSideOption[j].value){
              this.shelfList[i].shelfSide = this.shelfSideOption[j].label
            }
          }
        }
        this.shelfloading = false
      })
    },
    // 新增
    handleShelfAdd() {
      this.resetShelfForm()
      this.resetForm('shelfForm')
      this.shelfTitle = "档案柜新增"
      this.shelfOpen = true
      this.isShelfCode = false
      this.getKfqyOption()
    },
    handleShelfUpdate(row) {
      this.resetShelfForm()
      this.resetForm('shelfForm')
      const shelfId = row.shelfId
      this.getKfqyOption()
      checkShelf(shelfId).then(response => {
        if(response.data == 200) {
          getShelfDetail(shelfId).then(response => {
            this.shelfForm = response.data
            this.storeTitle = "修改档案柜"
            this.isShelfCode = true
            this.shelfOpen = true
          })
        } else {
          this.$message({ message: '档案柜已使用', type: 'warning' })
          return
        }
      })
    },
    handleShelfDelete(row) {
      const shelfId = row.shelfId;
      const shelfName=row.shelfName;
      checkShelf(shelfId).then(response => {
          if(response.data == 200) {
            this.$modal.confirm('是否确认删除名称为"' + shelfName + '"的数据项？').then(function() {
              return deleteShelf(shelfId)
            }).then(() => {
              this.getDeptTree()
              this.getShelfList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
          } else {
            this.$message({ message: '档案柜已使用', type: 'error' })
            return
          }
      })
    },
    handleShelfView(row) {
      const shelfId = row.shelfId
      this.gridDetailParams.shelfId = shelfId
      this.gridDetailParams.pageNum = 1
      this.gridDetailParams.pageSize = 10
      this.gridOpen = true
      this.getGridDetailList()
    },
    getGridDetailList() {
      console.log(this.gridDetailParams)
      getGridList(this.gridDetailParams).then(response => {
        this.gridDetailTotal = response.total
        this.gridDetailList = response.rows
        this.gridDetailloading = false
      })
    },
    getKfqyOption() {
      if(this.wareHouseForm.wareHouseRegion != null) {
        const arr = this.wareHouseForm.wareHouseRegion.split(';')
        var arr1 = []
        for (let i = 0; i < arr.length; i++) {
          const kfqy= this.dict.type.REGION.filter(item => item.value === arr[i])
          console.log(kfqy)
          arr1.push(...kfqy)
          console.log(arr1)
        }
        this.kfquOption = arr1
      }
      console.log(this.kfquOption.length)
      if(this.kfquOption.length == 1) {
        this.shelfForm.kfqy = this.kfquOption[0].value
      }
      if(this.kfquOption.length == 0) {
        this.isKfqy = true
      } else {
        this.isKfqy = false
      }
    },
    submitShelfForm() {
      this.$refs["shelfForm"].validate(valid => {
          if (valid) {
            if(this.isKfqy == false) {
              if(this.shelfForm.kfqy == null || this.shelfForm.kfqy == undefined || this.shelfForm.kfqy == '') {
                this.$message({ message: '请输入位置', type: 'warning' })
                return
              }
            }
            if(this.shelfForm.shelfId!=undefined){
              this.shelfForm.storeId = this.wareHouseForm.wareHouseId
              if(this.shelfForm.shelfSide == 'AB') {
                this.shelfForm.shelfTotalnum = this.shelfForm.shelfStand * this.shelfForm.shelfCross * 2
              } else {
                this.shelfForm.shelfTotalnum = this.shelfForm.shelfStand * this.shelfForm.shelfCross
              }
              updateShelf(this.shelfForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.shelfOpen = false;
                this.kfquOption = []
                this.getDeptTree()
                this.getShelfList();
              })
            } else {
              this.shelfForm.storeId = this.wareHouseForm.wareHouseId
              if(this.shelfForm.shelfSide == 'AB') {
                this.shelfForm.shelfTotalnum = this.shelfForm.shelfStand * this.shelfForm.shelfCross * 2
              } else {
                this.shelfForm.shelfTotalnum = this.shelfForm.shelfStand * this.shelfForm.shelfCross
              }
              addShelf(this.shelfForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.shelfOpen = false;
                this.kfquOption = []
                this.getDeptTree()
                this.getShelfList();
              })
            }
          }
      })
    },
    // 弹窗取消
    shelfCancel() {
      this.shelfOpen = false
      this.kfquOption = []
    },
    // 多选框
    handleSelection(selection) {
      this.shelfIds = selection.map(item => item.shelfId)
      this.shelfSingle = selection.length!==1
      this.shelfMultiple = !selection.length
    },
    // 重置表单
    resetShelfForm() {
      this.shelfForm = {
        shelfCode: undefined,
        shelfName: undefined,
        kfqy: undefined,
        shelfSide: undefined,
        shelfWidth: undefined,
        shelfHeight: undefined,
        shelfCross: undefined,
        shelfStand: undefined
      }
    },

    // 档案格列表
    getGridList() {
      this.gridParams.shelfId = this.wareHouseForm.wareHouseId
      getGridList(this.gridParams).then(response => {
        this.gridTotal = response.total
        this.gridList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.shelfSideOption.length; j++) {
            if(response.rows[i].gridSide == this.shelfSideOption[j].value) {
              this.gridList[i].gridSide = this.shelfSideOption[j].label
            }
          }
        }
        this.gridloading = false
      })
    },
    table_index(index){
      return (this.gridParams.pageNum-1) * this.gridParams.pageSize + index + 1;
    },
    // 多选框
    handleSelectionGrid(selection) {
      this.gridIds = selection.map(item => item.id)
      this.gridSingle = selection.length!==1
      this.gridMultiple = !selection.length
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.span-ellipsis {
  display: block;
  font-size: 14px;
}
</style>
